---
title: E-commerce
description: Une introduction à l'ajout d'options d'e-commerce à votre site Astro
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro'

Avec Astro, vous pouvez créer plusieurs options d'e-commerce, des liens de paiement aux pages de paiement hébergées, en passant par la création d'une boutique complète à l'aide d'une API de service de paiement.

## Traitement des paiements par superposition

Certains services de traitement des paiements (par exemple [Lemon Squeezy](#lemon-squeezy), [Paddle](#paddle)) ajoutent un formulaire de paiement pour permettre à vos clients d'acheter sur votre site. Ces formulaires peuvent être utilisés en superposition ou intégrés dans une page de votre site. Ils peuvent offrir une personnalisation de base ou une image de marque du site, et peuvent être ajoutés à votre projet Astro sous forme de scripts, de boutons ou de liens externes.

### Lemon Squeezy

[Lemon Squeezy](https://www.lemonsqueezy.com/) est une plateforme tout-en-un pour les paiements et les abonnements avec un support à plusieurs devises, une conformité fiscale globale, l'intégration de PayPal et bien plus encore. Elle vous permet de créer et de gérer des produits et services numériques à partir du tableau de bord de votre compte et fournit des URL de produits pour le processus de paiement.

La [bibliothèque JavaScript de base de Lemon.js](https://docs.lemonsqueezy.com/help/lemonjs/what-is-lemonjs) vous permet de vendre vos produits Lemon Squeezy à l'aide d'un lien de paiement.

#### Utilisation de base

Voici un exemple d'ajout d'un élément Lemon Squeezy « Acheter maintenant » à une page Astro. Cliquer sur ce lien ouvrira une page de paiement et permettra au visiteur de finaliser un achat unique.

<Steps>
1. Ajoutez la balise `<script>` suivante à l'en-tête (`head`) ou au corps (`body`) de votre page :

    ```html title="src/pages/my-product-page.astro"
    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
    ```
  
2. Créez une balise d'ancrage sur la page qui renvoie à l'URL de votre produit. Incluez la classe `lemonsqueezy-button` pour ouvrir une fenêtre de paiement lorsqu'on clique dessus.

    ```html title="src/pages/my-product-page.astro"
    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
     Acheter maintenant
    </a>
    ```
</Steps>

#### Lemon.js

Lemon.js propose également des fonctions supplémentaires telles que [l'ouverture programmatique de fenêtres superposées](https://docs.lemonsqueezy.com/help/lemonjs/opening-overlays) et [la gestion des événements de la fenêtre superposée](https://docs.lemonsqueezy.com/help/lemonjs/handling-events).

<ReadMore> Lisez le [Guide de démarrage du développeur Lemon Squeezy](https://docs.lemonsqueezy.com/guides/developer-guide) pour plus d'informations.</ReadMore>

### Paddle

[Paddle](https://www.paddle.com/) est une solution de facturation pour les produits et services numériques. Elle gère les paiements, les taxes et la gestion des abonnements par le biais d'une interface de paiement superposée ou intégrée au site.

[Paddle.js](https://developer.paddle.com/paddlejs/overview) est une bibliothèque JavaScript légère qui vous permet de créer des expériences de facturation d'abonnement riches et intégrées à l'aide de Paddle.

#### Utilisation de base

Voici un exemple d'ajout d'un élément Paddle « Acheter maintenant » à une page Astro. Cliquer sur ce lien ouvrira une page de paiement et permettra au visiteur de finaliser un achat unique.

Une fois que le domaine de votre lien de paiement par défaut (votre propre site web) est approuvé par Paddle, vous pouvez transformer n'importe quel élément de votre page en un déclencheur de fenêtre de paiement superposée à l'aide d'attributs de données HTML.

<Steps>
1. Ajoutez les deux balises `<script>` suivantes à l'en-tête (`head`) ou au corps (`body`) de votre page :

    ```html title="src/pages/my-product-page.astro"
    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
    <script type="text/javascript">
     Paddle.Setup({ 
       token: '7d279f61a3499fed520f7cd8c08' // remplacer par un jeton côté client
     });
    </script>
    ```
  
2. Transformez n'importe quel élément de votre page en bouton de paiement Paddle en ajoutant la classe `paddle_button` :

    ```html title="src/pages/my-product-page.astro"
    <a href="#" class="paddle_button">Acheter maintenant</a>
    ```
  
3. Ajoutez un attribut `data-items` pour spécifier l'id du prix (`priceId`) et la quantité (`quantity`) de votre produit Paddle. Vous pouvez également passer d'autres [attributs de données HTML pris en charge](https://developer.paddle.com/paddlejs/html-data-attributes) pour pré-remplir les données, gérer le succès de la commande, ou donner un style à votre bouton et à la fenêtre de commande :

    ```html title="src/pages/my-product-page.astro"
    <a 
      href="#"
      class="paddle_button"
      data-display-mode="overlay"
      data-theme="light"
      data-locale="fr"
      data-success-url="https://exemple.com/merci"
      data-items='[
       {
         "priceId": "pri_01gs59hve0hrz6nyybj56z04eq", 
         "quantity": 1
       }
      ]'
    >
      Acheter maintenant
    </a>
    ```
</Steps>

#### Paddle.js

Au lieu de transmettre des attributs de données HTML, vous pouvez envoyer des données à la fenêtre de paiement superposée en utilisant JavaScript pour transmettre des attributs multiples et une personnalisation encore plus poussée. Vous pouvez également créer des flux de travail améliorés à l'aide d'un tunnel de commande intégré à votre site.

<ReadMore>En savoir plus sur [l'utilisation de Paddle.js pour créer un tunnel de commande intégré](https://developer.paddle.com/build/checkout/build-branded-inline-checkout).</ReadMore>


## Solutions complètes d'e-commerce

Pour personnaliser davantage le panier d'achat et le processus de paiement de votre site, vous pouvez connecter un fournisseur de services de transactions financières plus complet (par exemple [Snipcart](#snipcart)) à votre projet Astro. Ces plateformes d'e-commerce peuvent également s'intégrer à d'autres services tiers pour la gestion des comptes utilisateurs, la personnalisation, l'inventaire et l'analyse.

### Snipcart

[Snipcart](https://snipcart.com/) est une plate-forme de panier d'achat en HTML/JavaScript puissante et adaptée aux développeurs.

Snipcart vous permet également d'intégrer des services tiers tels que des fournisseurs d'expédition, d'activer des webhooks pour une intégration e-commerce avancée entre votre panier d'achat et d'autres systèmes, de choisir parmi plusieurs passerelles de paiement (par exemple Stripe, Paypal et Square), de personnaliser des modèles d'e-mail et fournit même des environnements de test en direct.

:::tip
Vous voulez une solution Snipcart pré-construite à la place ? Consultez [`astro-snipcart`](https://astro-snipcart.vercel.app/), un modèle Astro communautaire entièrement fonctionnel comprenant un système de conception optionnel, prêt à être intégré à votre compte Snipcart existant.
:::

#### Utilisation de base

Voici un exemple de configuration d'un tunnel de commande avec Snipcart et d'ajout d'éléments de boutons « Ajouter au panier » et « Commander maintenant » à une page Astro. Cela permettra à vos visiteurs d'ajouter des produits à leur panier sans être immédiatement renvoyés vers une page de paiement.

<ReadMore>Pour des instructions complètes, y compris la configuration de votre boutique Snipcart, veuillez consulter [la documentation d'installation de Snipcart](https://docs.snipcart.com/v3/setup/installation).</ReadMore>

<Steps>
1. Ajoutez le script [comme indiqué dans les instructions d'installation de Snipcart](https://docs.snipcart.com/v3/setup/installation) sur votre page après l'élément `<body>`.
    ```html title="src/pages/my-product-page.astro"
    <body></body>
    <script>
     window.SnipcartSettings = {
       publicApiKey: "VOTRE_CLE_API",
       loadStrategy: "on-user-interaction",
     };
    
     (function()...); // disponible dans la documentation de Snipcart
    </script>
    ```

2. Personnalisez `window.SnipcartSettings` avec l'un des [paramètres Snipcart disponibles](https://docs.snipcart.com/v3/setup/installation#settings) pour contrôler le comportement et l'apparence de votre panier.

    ```html title="src/pages/my-product-page.astro"
    <script>
      window.SnipcartSettings = {
       publicApiKey: "VOTRE_CLE_API",
       loadStrategy: "manual",
       version: "3.7.1",
       addProductBehavior: "none",
       modalStyle: "side",
      };
      
      (function()...); // disponible dans la documentation de Snipcart
    </script>
    ```

3. Ajoutez `class="snipcart-add-item"` à tout élément HTML, tel qu'un `<button>`, pour ajouter un article au panier lorsqu'on clique dessus. Inclure également tout autre élément de données pour [les attributs communs des produits Snipcart](https://docs.snipcart.com/v3/setup/products) tels que le prix et la description, ainsi que tous les champs facultatifs.

    ```html title="src/pages/my-product-page.astro"
    <button
      class="snipcart-add-item"
      data-item-id="astro-print"
      data-item-price="39.99"
      data-item-description="Une impression encadrée du logo Astro."
      data-item-image="/assets/images/astro-print.jpg"
      data-item-name="Tirage Astro"
      data-item-custom1-name="Couleur du cadre"
      data-item-custom1-options="Marron|Argent[+10.00]|Or[+20.00]"
      data-item-custom2-name="Instructions de livraison"
      data-item-custom2-type="textarea"
    >
      Ajouter au panier
    </button>
    ```

4. Ajoutez un bouton de paiement Snipcart avec la classe `snipcart-checkout` pour ouvrir le panier et permettre aux visiteurs de terminer leur achat avec un formulaire de paiement.

    ```html title="src/pages/my-product-page.astro"
    <button class="snipcart-checkout">Cliquez ici pour payer</button>
    ```
</Steps>

#### SDK JavaScript de Snipcart

Le [SDK JavaScript de Snipcart](https://docs.snipcart.com/v3/sdk/basics) vous permet de configurer, de personnaliser et de gérer votre panier Snipcart de manière programmatique.

Cela vous permet d'effectuer des actions telles que :

- Récupérer des informations pertinentes sur la session Snipcart en cours et appliquer certaines opérations au panier.
- Écouter les événements entrants et déclencher des rappels de manière dynamique.
- Écouter les changements d'état et recevoir un instantané complet de l'état du panier.

<ReadMore>Consultez la [documentation de Snipcart](https://docs.snipcart.com/v3/) pour plus d'informations sur toutes les options permettant d'intégrer Snipcart à votre projet Astro.</ReadMore>

#### `astro-snipcart`

Il existe deux paquets communautaires `astro-snipcart` qui peuvent simplifier l'utilisation de Snipcart.

- [Le modèle Astro `@lloydjatkinson/astro-snipcart`](https://astro-snipcart.vercel.app/) : Ce modèle Astro comprend un système de conception optionnel pour une solution e-commerce complète et prête à l'emploi. Apprenez-en plus sur son propre site de documentation, y compris [la motivation derrière la création de `astro-snipcart`](https://astro-snipcart.vercel.app/motivation) : proposer un moyen pratique et natif d'Astro pour vous permettre d'interagir avec l'API Snipcart.

- [L'intégration `@Adammatthiesen/astro-snipcart`](https://github.com/Adammatthiesen/astro-snipcart) : Cette intégration a été fortement inspirée par le thème `astro-snipcart` et fournit des composants Astro (ou des composants Vue) que vous pouvez ajouter à votre projet Astro existant pour créer des produits, contrôler le panier, et plus encore. Voir le [tutoriel complet](https://matthiesen.xyz/blog/getting-started-with-my-astro-snipcart-addon) pour plus d'informations.

## Ressources communautaires

- [Expérience pratique : boutique d'e-commerce avec Astro ?](https://crystallize.com/blog/building-ecommerce-with-astro) (Anglais)
- [Collecter des paiements avec Stripe en utilisant Astro](https://zellwk.com/blog/stripe-astro-recipe/) (Anglais)
